<script setup>
import { ref } from 'vue'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted } from 'vue'

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
])

const chardom = ref(null)

var option

const startChar = () => {
  var myChart = echarts.init(chardom.value)
  option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      formatter: (a) => {
        return `${a[1].name}<br/>${a[1].seriesName}：${a[1].value} %<br/>${a[0].seriesName}：${a[0].value} %`
      }
    },
    legend: {
      data: ['你的遗忘曲线', '艾宾浩斯遗忘曲线']
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4.8%',
      bottom: '3%',
      containLabel: true
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['今天', '1天后', '2天后', '6天后', '31天后']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value} %'
      }
    },
    series: [
      {
        name: '艾宾浩斯遗忘曲线',
        type: 'line',
        data: [100, 33, 28, 25, 21],
        smooth: true,
        label: {
          show: false,
          position: 'bottom'
        }
      },
      {
        name: '你的遗忘曲线',
        type: 'line',
        data: data.value,
        smooth: true,
        label: {
          show: false,
          position: 'top'
        }
      }
    ]
  }

  option && myChart.setOption(option)
}

import { useUserStore } from '@/stores'
const userStore = useUserStore()
const user = userStore.user

const data = ref([100, 86, 62, 53, 42])
if (user.id === 1) {
  data.value = [100, 63, 51, 42, 38]
} else if (user.id === 2) {
  data.value = [100, 74, 53, 45, 38]
} else if (user.id === 3) {
  data.value = [100, 94, 87, 74, 69]
}
onMounted(() => {
  try {
    startChar()
  } catch {
    console.log('图表加载失败')
  }
})
</script>
<template>
  <div v-if="user.name">
    <!-- 图标区域 -->
    <div ref="chardom" class="char-dom"></div>
    <!-- 其他区域 -->
    <div class="footer">
      <div class="tips">
        <span>坚持使用单词悦背越久 你的遗忘曲线计算越精准</span>
      </div>
    </div>
  </div>
  <van-empty v-else description="未登录">
    <van-button
      round
      type="primary"
      @click="$router.push('/login')"
      class="bottom-button"
      >开启升本单词之旅</van-button
    >
  </van-empty>
</template>

<style lang="less" scoped>
.footer .tips {
  margin: auto;
  margin-top: 1.5vh;
  border-radius: 10px;
  width: 98%;
  height: 7vh;
  background: #d4d1d1;
  span {
    display: block;
    padding: 2vh;
    font-size: 2vh;
  }
}
.char-dom {
  margin-top: 5vh;
  width: 100%;
  height: 65vh;
}
</style>
